<template>
  <div>
        <Header></Header>
        <h3>新增管理员</h3>
        <el-row :gutter="30">
            <el-col :span="10"
                ><div class="grid-content bg-purple">
                    <el-form :model="adminOne" label-width="80px">
                        <el-form-item label="登录账号">
                            <el-input v-model="adminOne.account"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码">
                            <el-input placeholder="请输入密码" v-model="adminOne.password" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="真实姓名">
                            <el-input v-model="adminOne.realname"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码">
                            <el-input v-model="adminOne.telephone" @blur="phoneNum"></el-input>
                            
                        </el-form-item>
                        <el-form-item>
                            <el-button   type="primary" @click="onSubmit" >新增数据</el-button>
                        </el-form-item>
                    </el-form>
                </div></el-col
            >
            <!-- <el-col :span="4"
                ><div class="grid-content bg-purple">
                    <el-upload
                        class="avatar-uploader"
                        action="http://47.98.128.191:3000/images/uploadImages"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                    >
                        <img v-if="studentsOne.image" :src="studentsOne.image" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload></div
            ></el-col> -->
        </el-row>
    </div>
</template>

<script>
import Header from "../common/Header.vue";
import {createNamespacedHelpers} from 'vuex'
const{ mapActions} = createNamespacedHelpers('admin')
export default {
    components:{
       Header 
    },
    data() {
        return {
            adminOne:{}
        }
    },
    methods: {
        ...mapActions(['addDataAsync']),
       async onSubmit(){
            // console.log(this.adminOne);
           const {data} = await this.addDataAsync(this.adminOne)
        //    console.log(data);
           if(data.code == 200){
                this.$message({
                 message: '新增数据成功',
                 type: 'success'
                });
                this.$router.push('/adminsList')
           }
        },
        //判断手机号
        phoneNum(){
            const res = /^[1][3,4,5,7,8][0-9]{9}$/
            if(!res.test(this.adminOne.telephone)){
                this.$message({
                     showClose: true,
                    message: '手机号格式不正确',
                    type: 'warning'
                 });
            }
        },


    },
}
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
.el-select{
    width: 435px;
}
.el-button {

    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover{
         background-color: rgb(202, 219, 248);
         border-color: rgb(202, 219, 248);
    }
}
.avatar-uploader, .el-upload {
    border: 2px dashed red;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ,.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>